In this article, we’ll look at a few examples of well coded, search friendly navigation and look at ways to enhance your site architecture for SEO.
Technically speaking
What makes for a spider friendly navigation? In today’s out of the box CMS world, most navigation is already pretty SEO friendly, but just every now and again you come across a real car crash of a navigation that needs rebuilding from scratch.
If you’re reviewing a website with a suspect navigation (or “dodgy”, as my friends in the US love to hear me say), you’ll probably see some of the following signs:
– No drop downs work with JavaScript disabled
– Global / header links are image based rather than text
– A heap of internal links disappear when you’re browsing the site with JavaScript and CSS disabled
– The Google cached, text only version of your page is missing those precious internal links too
Search engine friendly navigation requires only properly structured HTML combined with CSS for all the fancy bits. Technically speaking, if you’re specifying a new navigation for your website, you should be asking for a “cross-browser drop-down cascading validating menu”. Can you say that 5 times in a row?
The HTML is fiendishly simple, and you should be looking out for something like this unordered list of links in the cached (text only) or CSS / JavaScript disabled view of your web page:
Using CSS navigational elements for SEO
Drop down menus needn’t always be “drop down”, as such. Think about it – have you ever had a problem where design wise, it was too difficult to increase the number of internal links you have in a navigational section on your website? Next time you’re in that situation, think about how you might use this approach to increase the number of links on your pages.
Interested in testing this for yourself? Take a look at these navigational ideas:
– View all hotels in Prague
– See events within 500m of this location
– See more case studies on CRM
– See all flights to Turkey
– Other users also bought / most popular products in this category
Breadcrumb navigation that expands with a CSS drop down:
A simple example expanding a list of options for a user searching for flights:
Improving your navigation can have a positive impact on your site architecture. By making sure these fundamentals are covered, you can build your marketing efforts on a solid foundation knowing your website is crawlable and super-friendly to search engines. What are your favorite examples of great navigation?
